<template>
  <div class="entrust">
    <div class="title">
      二币USD 杠杆
      <el-tag :type="entrust.isOpen ? 'success' : 'danger'" size="mini">{{
        entrust.isOpen ? "开" : "平"
      }}</el-tag>
      <span class="state" :style="{ color: stateColor }">{{ state }}</span>
    </div>
    <div>
      <el-tag
        class="tag"
        size="mini"
        :type="entrust.isOpen ? 'success' : 'danger'"
        v-if="entrust.isShort"
        >{{ entrust.isOpen ? "卖出开空" : "买入平空" }}</el-tag
      >
      <el-tag
        class="tag"
        size="mini"
        :type="entrust.isOpen ? 'success' : 'danger'"
        v-else
        >{{ entrust.isOpen ? "买入开多" : "卖出平多" }}</el-tag
      >
      <el-tag class="tag" size="mini" type="info">逐仓</el-tag>
      <el-tag class="tag" size="mini" type="info" v-if="entrust.lever"
        >x{{ entrust.lever }}</el-tag
      >
      <span class="time">{{ getFomatTime }}</span>
    </div>
    <div class="content">
      <el-row :gutter="10" style="padding: 4px 0">
        <el-col :span="8">
          <div class="label">委托总量</div>
          <div>{{ keepTwoDecimal(entrust.btcCount) }}</div>
        </el-col>
        <el-col :span="8">
          <div class="label">委托价</div>
          <div>{{ keepTwoDecimal(entrust.indexPrice) }}</div>
        </el-col>
        <el-col :span="8" v-if="entrust.isCompleted">
          <div class="label">成交价</div>
          <div>{{ keepTwoDecimal(entrust.finalPrice) }}</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Entrust } from "@/js/exchangeUtils";
import { keepTwoDecimal } from "@/js/calcUtils";
export default {
  name: "Entrust",
  props: {
    entrust: Entrust,
  },
  data() {
    return { stateColor: "#000" };
  },
  methods: {
    fomatTime(timestamp) {
      let date = new Date(timestamp);
      return `${
        date.getMonth() + 1
      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
    },
    setStateColor(c) {
      this.stateColor = c;
    },
    keepTwoDecimal(num) {
      return keepTwoDecimal(num);
    },
  },
  computed: {
    getFomatTime() {
      return this.fomatTime(this.entrust.timestamp);
    },
    state() {
      if (this.entrust.isCompleted) {
        this.setStateColor("#67C23A");
        return "已完成 " + this.fomatTime(this.entrust.completedTimestamp);
      }
      if (this.entrust.isCancelled) {
        this.setStateColor("#F56C6C");
        return "已撤销 " + this.fomatTime(this.entrust.cancelledTimestamp);
      }
      return "";
    },
  },
  beforeDestroy() {},
};
</script>

<style>
.entrust {
  padding: 5px;
  border-bottom: 1px solid #a6a7aa;
}

.entrust > .title {
  font-weight: 800;
  font-size: 1.1rem;
}

.entrust .time {
  color: #909399;
  font-size: 0.8rem;
}

.entrust .tag {
  margin-right: 6px;
}

.entrust > .content {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  text-align: left;
}

.entrust > .content .label {
  margin-bottom: 6px;
}

.entrust .state {
  font-size: 0.7rem;
  float: right;
  font-weight: 600;
}
</style>
